<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-24 13:33:37
 * @LastEditTime: 2024-06-24 18:18:51
-->
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { View, Close } from '@element-plus/icons-vue';
import { useSwitch } from '@/hooks/index';
import { detailsProp, Emits } from '../props';
const { flag, close, open } = useSwitch();
const { constants, title, data,importData } = defineProps(detailsProp);
const emit = defineEmits<Emits>();
const fullscreen = ref(false);
const column = ref(2);
onMounted(() => {
    window.addEventListener('resize', function () {
        if (window.innerWidth <= 768) {
            column.value = 1;
            fullscreen.value = true;
        } else {
            column.value = 2;
            fullscreen.value = false;
        }
    });
});
const detailsChange = () => {
    emit('detailsChange', importData);
    open();
};
</script>
<template>
    <el-button type="danger" link :icon="View" @click.stop.prevent="detailsChange">{{ $t(`button.details`) }}</el-button>

    <el-dialog :fullscreen="fullscreen" v-model="flag" destroy-on-close draggable :title="title" :width="`794px`" append-to-body :before-close="close" custom-class="adapt-dialog">
        <div class="padding-top-bottom-20 padding-left-right-10">
            <el-descriptions :column="column" :title="`基本信息`" border>
                <template v-for="item in constants">
                    <el-descriptions-item v-if="item.mode === 'normal'" :span="item.span" label-align="center" :label="item.label">
                        {{ data[item.prop] }}
                    </el-descriptions-item>

                    <el-descriptions-item v-if="item.mode === 'other'" :span="item.span" label-align="center" :label="item.label">
                        {{ data[item.prop] }}
                    </el-descriptions-item>
                </template>
            </el-descriptions>
            <el-descriptions :column="column" border>
                <el-descriptions-item label-align="center" :label="$t(`outside.state`)">{{ data.enbaled }}</el-descriptions-item>
                <el-descriptions-item label-align="center" label="版本号">{{ data.revision }}</el-descriptions-item>
                <el-descriptions-item label-align="center" label="创建人">{{ data.createBy }}</el-descriptions-item>
                <el-descriptions-item label-align="center" label="创建日期">{{ data.createTime }}</el-descriptions-item>
                <el-descriptions-item label-align="center" label="更新人">{{ data.updateBy }}</el-descriptions-item>
                <el-descriptions-item label-align="center" label="更新日期">{{ data.updateTime }}</el-descriptions-item>
            </el-descriptions>
        </div>
        <template #footer>
            <el-button type="info" :icon="Close" auto-insert-space @click="close">{{ $t(`button.cancel`) }}</el-button>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
:deep(.ep-descriptions__content) {
    max-width: 180px !important;
    // overflow: hidden;
    // white-space: nowrap;
}
:deep(.ep-descriptions__label) {
    width: 120px !important;
}
</style>
